<template>
  <CommonQueryLayout class="openapi-control">
    <TableTopControl
      title-text="OpenApi 列表"
      v-model:table-size="clientTableState.tableSize"
      v-model:table-columns="clientTableState.tableColumns"
      :loading="fetchClientListLoading"
      @reload-data="getClientList"
    >
      <a-button
        type="primary"
        @click="openAddClientDialog"
        :loading="optionClientLoading"
      >
        添加接入方
      </a-button>
    </TableTopControl>
    <a-table
      bordered
      :size="clientTableState.tableSize"
      :columns="clientTableState.tableColumns"
      :dataSource="clientTableState.tableData"
      :loading="fetchClientListLoading"
      :pagination="false"
      rowKey="clientId"
    >
      <template #options="{ record }">
        <a-space>
          <a-button
            size="small"
            type="primary"
            @click="openEditClientDialog(record)"
            :loading="optionClientLoading"
          >
            编辑
          </a-button>
          <a-popconfirm title="确定删除吗？" @confirm="delClient(record)">
            <a-button
              size="small"
              type="primary"
              danger
              :loading="deleteClientLoading"
            >
              删除
            </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>
  </CommonQueryLayout>
  <OptionClientDialog
    :data-wrapper="opClientDialogState"
    @enter="enterOpClient"
    @random-client="randomClient"
    :confirm-loading="optionClientLoading"
  />
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import useSearchApiList from './hooks/useSearchApiList'
import useOptionClientDialog from './hooks/useOptionClientDialog'

import CommonQueryLayout from '@/layout/CommonQueryLayout.vue'
import { TableTopControl } from '@/components/TopControl'
import OptionClientDialog from './components/OptionClientDialog.vue'
// import { QueryForm } from '@/components/Form'
// import { onMounted } from '@vue/runtime-core'

const { clientTableState, getClientList, fetchClientListLoading } =
  useSearchApiList()

const {
  opClientDialogState,
  openAddClientDialog,
  openEditClientDialog,
  enterOpClient,
  randomClient,
  delClient,
  optionClientLoading,
  deleteClientLoading,
} = useOptionClientDialog(getClientList)

onMounted(async () => {
  await getClientList()
})
</script>

<style lang="scss" scoped>
// @include b(openapi-control) {
// }
</style>
